<template>
	<el-dialog v-model="visible" :title="!dataForm.id ? '新增' : '修改' " :close-on-click-modal="false"
		:close-on-press-escape="false" :fullscreen="true">
		<el-form :model="dataForm" :rules="dataRule" ref="dataFormRef" @keyup.enter.native="dataFormSubmitHandle()"
			label-width="120px">
			<el-form-item prop="type" label="类型" size="mini">
				<el-radio-group v-model="dataForm.type" :disabled="!!dataForm.id">
					<el-radio :label="0">菜单</el-radio>
					<el-radio :label="1">按钮</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item prop="name" label="名称">
				<el-input v-model="dataForm.name" placeholder="名称"></el-input>
			</el-form-item>
			<el-form-item prop="parentName" label="上级菜单" class="menu-list">
				<el-popover v-model:visible="menuListVisible" placement="bottom-start" trigger="click">
					<template #reference>
						<el-input v-model="dataForm.parentName" :readonly="true" placeholder="上级菜单">
							<i v-if="dataForm.pid !== '0'" slot="suffix" @click.stop="deptListTreeSetDefaultHandle()"
								class="el-icon-circle-close el-input__icon"></i>
						</el-input>
					</template>

					<el-tree :data="menuList" :props="{ label: 'name', children: 'children' }" node-key="id"
						ref="menuListTree" :highlight-current="true" :expand-on-click-node="false" accordion
						@current-change="menuListTreeCurrentChangeHandle"></el-tree>
				</el-popover>
			</el-form-item>
			<el-form-item v-if="dataForm.type === 0" prop="url" label="路由">
				<el-input v-model="dataForm.url" placeholder="路由"></el-input>
			</el-form-item>
			<el-form-item v-if="dataForm.type === 0" prop="url" label="组件">
				<el-input v-model="dataForm.component" placeholder="组件"></el-input>
			</el-form-item>
			<el-form-item prop="sort" label="排序">
				<el-input-number v-model="dataForm.sort" controls-position="right" :min="0" label="排序">
				</el-input-number>
			</el-form-item>
			<el-form-item prop="permissions" label="授权标识">
				<el-input v-model="dataForm.permissions" placeholder="多个用逗号分隔，如：sys:menu:save,sys:menu:update"></el-input>
			</el-form-item>
			<el-form-item v-show="dataForm.type === 0" prop="icon" label="图标" class="icon-list">
				<el-popover v-model:visible="iconListVisible" placement="bottom-start" trigger="click"
					popper-class="mod-sys__menu-icon-popover">
					<template #reference>
						<el-input v-model="dataForm.icon" :readonly="true" placeholder="图标"></el-input>
					</template>
					<div class="mod-sys__menu-icon-inner">
						<div class="mod-sys__menu-icon-list">
							<el-button v-for="(item, index) in iconList" :key="index"
								@click="iconListCurrentChangeHandle(item)"
								:class="{ 'is-active': dataForm.icon === item }">
								<svg class="icon-svg" aria-hidden="true">
									<use :xlink:href="'#' + item" />
								</svg>
							</el-button>
						</div>
					</div>
				</el-popover>
			</el-form-item>
		</el-form>
		<template #footer>
			<el-button @click="visible = false">取消</el-button>
			<el-button type="primary" @click="dataFormSubmitHandle()">确定</el-button>
		</template>
	</el-dialog>
</template>

<script>
	import {ref,reactive,onMounted,nextTick,computed} from 'vue';
	import {getMenuListByType,getMenu,postMenu,putMenu} from '@/network/sys/menu'
	import {ElMessage} from 'element-plus';

	export default {
		name: "MenuAddOrUpdate",
		emits: ["refresh-data-list"],
		setup(props,{emit}) {
			
			const visible = ref(false);
			const menuList = ref([]);
			const menuListVisible = ref(false);
			const iconList = ref([]);
			const iconListVisible = ref(false);
			const dataForm = ref({
				id: "",
				type: 0,
				name: "",
				pid: "0",
				parentName: "",
				url: "",
				component: "",
				permissions: "",
				sort: 0,
				icon: ""
			})

			// const dataRule = computed()

			const dataRule = reactive({
				name: [{
					required: true,
					message: '必填项不能为空',
					trigger: "blur"
				}],
				parentName: [{
					required: true,
					message: '必填项不能为空',
					trigger: "change"
				}]
			})

			const dataFormRef = ref(null);
			const menuListTree = ref(null)

			const init = () => {
				visible.value = true;
				nextTick(function() {
					dataFormRef.value.resetFields();
					iconList.value = getIconList();
					dataForm.value.parentName = '一级菜单';
					getMenuList().then(() => {
						if (dataForm.value.id) {
							getInfo();
						}
					});
				});
				
			}

			const getIconList = () => {
				var res = [];
				var list = document.querySelectorAll('svg symbol')
				for (var i = 0; i < list.length; i++) {
					res.push(list[i].id);
				}
				return res;
			}
			//
			const getMenuList = () => {
				return getMenuListByType(0)
					.then(function(res) {
						if (res.code !== 0) {
							return ElMessage.error(res.msg);
						}
						menuList.value = res.data;
					})
					.catch(function() {});
			}
			// 获取信息
			const getInfo = () => {
				getMenu(dataForm.value.id)
					.then(function(res) {
						if (res.code !== 0) {
							return ElMessage.error(res.msg);
						}
						dataForm.value = _.merge({}, dataForm, res.data);
						if (dataForm.value.pid === "0") {
							return deptListTreeSetDefaultHandle();
						}
						menuListTree.setCurrentKey(dataForm.value.pid);
					})
					.catch(function() {});
			}
			// 上级菜单树, 设置默认值
			const deptListTreeSetDefaultHandle = () => {
				dataForm.value.pid = "0";
				dataForm.value.parentName = '一级菜单';
			}
			// 上级菜单树, 选中
			const menuListTreeCurrentChangeHandle = (data) => {
				dataForm.value.pid = data.id;
				dataForm.value.parentName = data.name;
				menuListVisible.value = false;
			}
			// 图标, 选中
			const iconListCurrentChangeHandle = (icon) => {
				dataForm.value.icon = icon;
				iconListVisible.value = false;
			}
			// 表单提交
			const dataFormSubmitHandle = _.debounce(
				() => {
					dataFormRef.value.validate((valid) => {
						if (!valid) {
							return false;
						}

						if(dataForm.value.type !== 0){
							dataForm.value.icon = "";
						}

						(() => {
							return !dataForm.value.id ? postMenu(dataForm.value) : putMenu(dataForm.value)
						})().then(function(res) {
								if (res.code !== 0) {
									return ElMessage.error(res.msg);
								}
								ElMessage({
									message: '操作成功',
									type: "success",
									duration: 500,
									onClose: function() {
										visible.value = false;
										emit("refresh-data-list");
									}
								});
							})
							.catch(function() {});
					});
				},
				1000, {
					leading: true,
					trailing: false
				}
			)
			return {
				visible,
				menuList,
				menuListVisible,
				iconList,
				iconListVisible,
				dataForm,
				dataRule,
				dataFormRef,
				menuListTree,
				init,
				getIconList,
				getMenuList,
				getInfo,
				deptListTreeSetDefaultHandle,
				menuListTreeCurrentChangeHandle,
				iconListCurrentChangeHandle,
				dataFormSubmitHandle
			}
		},

	}

</script>

<style scoped>
</style>
